<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0px;padding: 0px;}
    li{list-style: none;}
    a{text-decoration: none;}
    .wrap{width: 1000px;margin: 0 auto;}
    .sbox{width:198px;height:250px;border:1px solid #ededed;float: left;position: relative;}
    .sbox .pic{height: 165px;border-bottom: 1px solid #f8f8f8;}
    .sbox img{height: 165px;}
    .sbox .info{padding:14px 0 0 18px;height:57px;width: 180px;font-size: 12px;color:#686868;} 
    </style>
    <script src="ajax.js"></script>
</head>
<body>
    <div class="wrap">
            <ul>
                <!-- <li class="sbox">
                <a href="">
                <div class="pic"><img src="img/京东/京东效果_02.jpg"/></div>
                <div class="info">乔山 家用跑步机<h3 style="color:#e3393c;font-weight:400;">￥8499.00&nbsp;&nbsp;<i>1000</i></h3></div>
                <div class="sbox-box"></div>
                </a>
                </li> -->
            </ul>
        </div> 
    <script>
    var box=document.getElementsByTagName("ul")[0]
   function getData(listname){
    var p=new Promise(function(resolve,reject){
         $.ajax({url:"getGoodsByList.php",
                 data:{list:listname},
                 dataType:"json",
                 callback:function(e){
                    resolve(e)
                 }
         })
    })
    return p
   }

//    promise方法
//    getData("goodslist").then(function(e){
//      console.log(e)
//      var html=""
//      e.forEach(item => {
//          html+=`<li class="sbox">
//                 <a href="">
//                 <div class="pic"><img src="http:${item.goods_pic}"/></div>
//                 <div class="info">${item.goods_title}<h3 style="color:#e3393c;font-weight:400;">￥${item.goods_price}&nbsp;&nbsp;<i>${item.goods_trade_num}</i></h3></div>
//                 <div class="sbox-box"></div>
//                 </a>
//                 </li>`
//      });
//      box.innerHTML=html;
//      return getData("goodslist_copy")
//    }).then(function(e){
//      console.log(e)
//      var html=""
//      e.forEach(item => {
//          html+=`<li class="sbox">
//                 <a href="">
//                 <div class="pic"><img src="http:${item.goods_pic}"/></div>
//                 <div class="info">${item.goods_title}<h3 style="color:#e3393c;font-weight:400;">￥${item.goods_price}&nbsp;&nbsp;<i>${item.goods_trade_num}</i></h3></div>
//                 <div class="sbox-box"></div>
//                 </a>
//                 </li>`
//      });
//      box.innerHTML +=html;
//      return getData("goodslist_copy1")
//     }).then(function(e){
//      console.log(e)
//      var html=""
//      e.forEach(item => {
//          html+=`<li class="sbox">
//                 <a href="">
//                 <div class="pic"><img src="http:${item.goods_pic}"/></div>
//                 <div class="info">${item.goods_title}<h3 style="color:#e3393c;font-weight:400;">￥${item.goods_price}&nbsp;&nbsp;<i>${item.goods_trade_num}</i></h3></div>
//                 <div class="sbox-box"></div>
//                 </a>
//                 </li>`
//      });
//      box.innerHTML +=html;
//     })

    // Promise.all方法
    // Promise方法用于将多个promise实例包装成一个promise实例
    // promise对象 http://jsrun.net/tutorial/jZKKp
    Promise.all([getData("goodslist"),getData("goodslist_copy"),getData("goodslist_copy1")]).then(function(data){
        console.log(data)
        var html=""
        data.forEach(item => {
            item.forEach(item => {
                html+=`<li class="sbox">
                    <a href="">
                    <div class="pic"><img src="http:${item.goods_pic}"/></div>
                    <div class="info">${item.goods_title}<h3 style="color:#e3393c;font-weight:400;">￥${item.goods_price}&nbsp;&nbsp;<i>${item.goods_trade_num}</i></h3></div>
                    <div class="sbox-box"></div>
                    </a>
                    </li>`
            });
        });
        box.innerHTML= html;
    })
    </script>
</body>
</html>